<template>
	<navigatorComp title="举报" bgcColor="#0E0E0E" fontColor="#fff"></navigatorComp>
	<view class="content">
		<view class="problem">选择你想要举报的类型</view>
		<view class="log_list">
			<view
				class="tag"
				:class="{ active: item.checked }"
				@click="setIndex(index)"
				v-for="(item, index) in list"
				:key="index"
			>
				{{ item.name }}
			</view>
		</view>
		<view class="problem">举报描述(选填)</view>
		<up-textarea
			disableDefaultPadding
			border="none"
			height="300rpx"
			placeholderClass="plClass"
			count
			maxlength="200"
			v-model="formData.reportSubstance"
			placeholder="提供更多信息有助于举报被快速处理哦~"
		></up-textarea>

		<view class="problem flex">
			<view>图片证据(选填)</view>
			<view>最多6张</view>
		</view>
		<Upload
			:list="formData.reportImageUrls"
			@sendImgList="sendImgList"
			:addColor="'#FF6CD9'"
			:backgroundColor="'#292B2A'"
			:isMargin="true"
			:upLength="6"
			:formData="{
				fileType: 'image',
				fileDirType: 'report'
			}"
		/>
		<footerBtn name="提交" @clickBtn="submit" bgcColor="transparent"></footerBtn>
	</view>
</template>

<script setup>
import footerBtn from '/components/footerBtn/index.vue';
import navigatorComp from '/components/navigator/index.vue';
import { getCurrentInstance, ref, reactive } from 'vue';
import Upload from '../../components/upload/upload.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import HomeApi from '@/API/home/index.js';
onLoad((o) => {
	if (o.reportedId) {
		formData.reportedId = o.reportedId;
		formData.reportType = o.reportType;
	}
});
const list = reactive([
	{
		name: '垃圾营销',
		checked: false
	},
	{
		name: '涉黄信息',
		checked: false
	},
	{
		name: '违法信息',
		checked: false
	},
	{
		name: '诈骗信息',
		checked: false
	},
	{
		name: '不实信息',
		checked: false
	},
	{
		name: '涉企侵权',
		checked: false
	},
	{
		name: '违规营销',
		checked: false
	},
	{
		name: '网络暴力',
		checked: false
	},
	{
		name: '涉未成年人',
		checked: false
	},
	{
		name: '侵犯个人隐私',
		checked: false
	},
	{
		name: '侵犯个人权益',
		checked: false
	}
]);
const homeApi = new HomeApi();
const formData = reactive({
	reportedId: '',
	reportSubstanceType: [],
	reportSubstance: '',
	reportImageUrls: '',
	reportType: '1'
});

function setIndex(index) {
	if (list[index].checked) {
		list[index].checked = false;
		const indexToRemove = formData.reportSubstanceType.indexOf(list[index].name);
		if (indexToRemove !== -1) {
			formData.reportSubstanceType.splice(indexToRemove, 1);
		}
	} else {
		list[index].checked = true;
		formData.reportSubstanceType.push(list[index].name);
	}
	console.log(formData.reportSubstanceType);
}
const sendImgList = (e) => {
	formData.reportImageUrls = e;
};
const submit = () => {
	if (formData.reportSubstanceType.length) {
		formData.reportSubstanceType = formData.reportSubstanceType.join('#1#');
	} else {
		uni.showToast({
			title: '请选择举报类型',
			icon: 'none'
		});
		return;
	}
	homeApi
		.reportApi_(formData)
		.then((res) => {
			if (res.code === 0) {
				uni.showToast({
					title: '举报成功'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			}
		})
		.catch(() => {});
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background: url('http://112.124.50.179:8888/imgs/chaoshan/bg.png') no-repeat;
	background-size: cover;
	background-position: 100%;
}

.content {
	height: 80vh;
}

.problem {
	padding: 32rpx 0;
	color: #ececec;
}

.log_list {
	display: flex;
	flex-wrap: wrap;

	.tag {
		background-color: #333333;
		color: #c5c5c5;
		border-radius: 40rpx;
		padding: 16rpx 24rpx;
		font-size: 24rpx;
		margin-right: 16rpx;
		margin-bottom: 16rpx;
	}
}

::v-deep.u-textarea {
	background-color: #333333 !important;
	color: #fff;
	margin-bottom: 16rpx;
	padding: 32rpx 32rpx 70rpx 32rpx !important;
}

::v-deep.uni-textarea-textarea {
	color: #fff;
	font-size: 28rpx !important;
}

::v-deep .u-textarea__field {
	color: #fff !important;
	font-size: 28rpx !important;
	text-align: justify !important;
}

::v-deep.u-textarea__count {
	background: none !important;
	bottom: 16rpx !important;
	right: 16rpx !important;
	font-size: 28rpx !important;
}

.plClass {
	color: #969da3 !important;
}

.u-button {
	height: 88rpx !important;
}

.upload {
	display: flex;
	flex-wrap: wrap;

	margin-right: -10rpx;

	.add {
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		margin-bottom: 16rpx;
		border-radius: 12rpx;
	}

	view {
		width: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		height: 216rpx;
		margin-bottom: 16rpx;
		position: relative;

		.upload_img {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}

		.close {
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			right: 0;
			top: 0;
		}
	}
}

.flex {
	display: flex;
	align-items: center;
	justify-content: space-between;

	view:nth-child(2) {
		color: #999999;
		font-size: 28rpx;
	}
}

.active {
	background-color: #f3e0bb !important;
	color: #0e0e0e !important;
}
</style>
